import React, { useState } from 'react';
import { View, Text, FlatList, Image, TouchableOpacity, Alert } from 'react-native';
import useRem from '../rem/rem.js';
const PointsMall = ({ navigation }) => {
  const {rem} = useRem();
  const [userPoints, setUserPoints] = useState(1000); // 用户当前积分
  const [products] = useState([
    {
      id: '1',
      name: '苹果手环',
      pointsRequired: 100,
      stock: 200,
      exchangeTime: '2020-02-01—2020-04-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '2',
      name: '蓝牙音响',
      pointsRequired: 500,
      stock: 150,
      exchangeTime: '2024-01-01—2024-03-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '3',
      name: '苹果手环',
      pointsRequired: 100,
      stock: 200,
      exchangeTime: '2020-02-01—2020-04-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '4',
      name: '蓝牙音响',
      pointsRequired: 500,
      stock: 150,
      exchangeTime: '2024-01-01—2024-03-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '5',
      name: '苹果手环',
      pointsRequired: 100,
      stock: 200,
      exchangeTime: '2020-02-01—2020-04-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '6',
      name: '蓝牙音响',
      pointsRequired: 500,
      stock: 150,
      exchangeTime: '2024-01-01—2024-03-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '7',
      name: '蓝牙音响',
      pointsRequired: 500,
      stock: 150,
      exchangeTime: '2024-01-01—2024-03-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
    {
      id: '8',
      name: '蓝牙音响',
      pointsRequired: 500,
      stock: 150,
      exchangeTime: '2024-01-01—2024-03-01',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E/u1217.png',
    },
  ]);


  // const handleExchange = (item) => {
  //   if (userPoints >= item.pointsRequired) {
  //     setUserPoints(userPoints - item.pointsRequired);
  //     Alert.alert('兑换成功', `你已成功兑换 ${item.name}！`);
  //   } else {
  //     Alert.alert('积分不足', '您的积分不足，无法兑换该商品。');
  //   }
  // };

  const renderProduct = ({ item }) => (
    <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#ffffff',
      width: '100%',
      padding: rem(10),
      marginBottom: rem(10),
      height: rem(145), // 固定高度，用于 getItemLayout
     
    }}>
      <Image source={{ uri: item.imageUrl }} style={{
        width: rem(120),
        height: rem(120),
        borderRadius: rem(8),
        marginRight: rem(10),
      }} />
      <View style={{
        flex: 1,
      }}>
        <Text style={{
          fontSize: rem(14),
          width:rem(56),
          height:rem(19),
          marginBottom: rem(7),
        }}>{item.name}</Text>
        <Text style={{
          fontSize: rem(12),
          color: '#555',
          width:rem(95),
          height:rem(16),
          marginBottom: rem(7),
        }}>所需积分： {item.pointsRequired}</Text>
        <Text style={{
          fontSize: rem(12),
          color: '#555',
          width:rem(85),
          height:rem(16),
          marginBottom: rem(7),
        }}>库存： {item.stock}</Text>
        <Text style={{
          fontSize: rem(12),
          color: '#555',
          width:rem(228),
          height:rem(16),
          marginBottom: rem(27),
        }}>兑换时间： {item.exchangeTime}</Text>
      </View>

      <TouchableOpacity
        style={{
          backgroundColor: '#007BFF',
          position: 'absolute',
          right: rem(10),
          bottom: rem(5),
          width: rem(70),
          height: rem(29),
         
        }}
        onPress={() => navigation.navigate('详情')}
      >
        <Text style={{
          color: '#ffffff',
          fontSize: rem(12),
          textAlign: 'center',
          lineHeight: rem(29),
        }}>兑换</Text>
      </TouchableOpacity>
    </View>
  );

  // 优化 FlatList 性能
  const getItemLayout = (data, index) => ({
    length: 145, // 每个列表项的高度（图片 + 信息）
    offset: 145 * index, // 每个项的起始位置
    index,
  });

  return (
    <View style={{
      flex: 1,
      // backgroundColor: '#f5f5f5',
      // paddingHorizontal: rem(10),
 
    }}>
      <Text style={{
        width: rem(375),
        height: rem(44),
        backgroundColor: '#ffffff',
        borderBottomColor: '#e5e5e5',
        borderBottomWidth: rem(2),
        lineHeight: rem(44),
        paddingLeft: rem(10),
        fontSize: rem(16),
      }}>积分商城</Text>
      <FlatList
        data={products}
        renderItem={renderProduct}
        keyExtractor={(item) => item.id}
        getItemLayout={getItemLayout} // 提前计算高度
        initialNumToRender={5} // 首次渲染的列表项数量
        maxToRenderPerBatch={5} // 每批渲染的最大数量
        windowSize={3} // 渲染视窗大小
        removeClippedSubviews={true} // 优化内存占用
        contentContainerStyle={{
          paddingBottom: rem(20),
        }}
      />
    </View>
  );
};



export default PointsMall;
